import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Button, Image, Alert, Tooltip, Modal, message, Popconfirm } from 'antd'
import AutoTable from '@/components/AutoTable'
import InitForm from '@/components/InitForm'
import { connect, history } from 'umi'
import { PlusOutlined } from '@ant-design/icons'
import { deletebase_salary } from '@/services/business'
// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input 

let defaultFields = {
    "min": {
        "value": null,
        "type": "inputnumber",
        "title": "最小收单金额",
        "name": [
            "min"
        ],
        "required": true
    },
    "max": {
        "value": null,
        "type": "inputnumber",
        "title": "最大收单金额",
        "name": [
            "max"
        ],
        "required": true
    },
    "salary": {
        "value": null,
        "type": "inputnumber",
        "title": "浮动底薪",
        "name": [
            "salary"
        ],
        "required": true
    }
}


function Three(props) {
    const [vs, cvs] = useState(false),//表单显/隐
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({}),
        [extraparams, setextraparams] = useState({ commission_type: 1 });

    let actionRef = useRef(), ChildRef = null;
    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }

    const tabList = [
        {
            key: '1',
            tab: '业务员浮动底薪',
        },
        {
            key: '2',
            tab: '非业务员浮动底薪',
        }
    ];
    const columns = [
        {
            "title": "最小收单金额",
            "dataIndex": "min",
            "key": "min"
        },
        {
            "title": "最大收单金额",
            "dataIndex": "max",
            "key": "max"
        },
        {
            "title": "浮动底薪",
            "dataIndex": "salary",
            "key": "salary"
        },
        {
            title: '操作',
            valueType: 'option',
            width: 140,
            render: (text, record, _, action) => [
                <a
                    style={{ color: "#1890ff" }}
                    onClick={() => {
                        cvs(true);
                        cf(fields => {
                            for (let i in fields) {
                                fields[i].value = record[i];
                            }
                            return { ...fields }
                        });
                        ciftype({
                            val: "edit",
                            title: "编辑浮动底薪",
                            id: record.id
                        })
                    }}
                >
                    编辑
                </a>,
                <Popconfirm
                    placement="bottom"
                    title={"确认删除该浮动底薪？"}
                    onConfirm={() => {
                        deletebase_salary(record.id).then(res => {
                            if (res.code == 0) {
                                message.success("操作成功");
                                reload();
                            }
                        })
                    }}
                    okText="删除"
                    cancelText="取消"
                >
                    <a style={{ color: "#f50" }}>
                        删除
                    </a>
                </Popconfirm>

            ],
        }
    ]

    let extrarender = ([
        <div className='action' title='新增' onClick={() => {
            cvs(true);
            cf(() => {
                for (let i in defaultFields) {
                    defaultFields[i].value = null;
                }
                return { ...defaultFields }
            });
            ciftype({
                val: "add",
                title: "新增浮动底薪"
            })
        }}>
            <PlusOutlined />
        </div>
    ])


    let saveData = (values) => {
        let { dispatch } = props;
        if (iftype.val == "add") {
            dispatch({
                type: 'business/base_salary',
                payload: { ...values, ...extraparams }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        } else if (iftype.val == "edit") {
            dispatch({
                type: 'business/editbase_salary',
                payload: { ...values, ...extraparams, id: iftype.id }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        }
    }

    return (
        <div className="pgcontainer">
            <AutoTable
                bordered={false}
                tabList={tabList}
                pagetitle={<span>浮动底薪管理</span>} //页面标题
                tabBarExtraContent={<a style={{ fontSize: 14, paddingLeft: 12 }} onClick={() => {
                    props.close()
                }}> 返回</a>}
                pageextra={extrarender} //页面操作 新增or批量终止
                columns={columns}
                actionRef={actionRef}
                onRef={node => ChildRef = node}
                path="/wbn-api/base_salary"
                extraparams={extraparams}
                onTabChange={(key) => {
                    setextraparams({
                        commission_type: key
                    })
                }}
            //withCard={false} 
            //cardtitle = "name" //卡片标题
            //cardavatar = "img_url" //卡片头像
            ></AutoTable>
            <Modal
                maskClosable={false}
                title={iftype.title}
                open={vs}
                onCancel={() => cvs(false)}
                footer={false}
                width={1400}
                destroyOnClose={true}
            >
                <InitForm
                    fields={fields}
                    submitData={(values) => {
                        saveData(values)
                    }}
                    onChange={(changedValues, allValues) => {
                        //联动操作
                    }}
                    submitting={
                        props.loading.effects['business/base_salary'] || props.loading.effects['business/editbase_salary'] || !vs
                    }
                >
                </InitForm>



            </Modal>
        </div>
    )
}

export default connect(({ business, loading }) => ({
    business,
    loading,
}))(Three)